<template>
  <a-spin :spinning="confirmLoading">

    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <!--主表区域 -->
      <a-tab-pane tab="考勤组" :key="refKeys[0]" :forceRender="true">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <a-row>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="考勤组名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                <a-input v-model="model.name" placeholder="请输入考勤组名称" ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="参加考勤人员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="staffUids">
                <j-select-user-by-dep v-model="model.staffUids" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="考勤组主负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="majorChargeUser">
                <j-select-user-by-dep v-model="model.majorChargeUser" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="考勤组子负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subManagerUserId">
                <j-select-user-by-dep v-model="model.subManagerUserId" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="子负责人权限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subManagerPermission">
                <j-multi-select-tag type="checkbox" v-model="model.subManagerPermission"  dictCode="sub_manager_permission" placeholder="请选择子负责人权限" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="打卡地点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="signConfigString">
                <a-input v-model="model.signConfigString" placeholder="请输入地点打卡" ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="加班规则" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="overtimeRule">
                <j-dict-select-tag type="list" v-model="model.overtimeRule"  dictCode="overtime_rules_dict" placeholder="请选择加班规则" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="外勤规则" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fieldworkRule">
                <j-multi-select-tag type="checkbox" v-model="model.fieldworkRule"  dictCode="FIELDWORK_RULE" placeholder="请选择外勤规则" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="允许外勤" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isAllowFieldwork">
                <j-switch v-model="model.isAllowFieldwork"  ></j-switch>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-model-item label="休息日打卡开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="restDayRule">
                <j-date placeholder="请选择休息日打卡开始时间" v-model="model.restDayRule" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24">
              <a-form-model-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
                <j-dict-select-tag type="radio" v-model="model.type"  dictCode="attendance_type" placeholder="请选择类型" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" v-show="model.type == '1'">
              <j-editable-table
                :ref="refKeys[2]"
                :loading="attendanceWorkdayTable.loading"
                :columns="attendanceWorkdayTable.columns"
                :dataSource="attendanceWorkdayTable.dataSource"
                :maxHeight="300"
                :rowNumber="true"
                :rowSelection="true"
                :actionButton="true"/>
            </a-col>
            <a-col :xs="24" :sm="24" v-show="model.type == '1' || model.type == '3'">
              <a-form-model-item label="法定节假日自动排休" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="statutoryDayAutoRest">
                <j-switch v-model="model.statutoryDayAutoRest"  ></j-switch>
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12" v-show="model.type == '2'">
              <a-form-model-item label="考勤班次" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="settingConfig">
                <j-dict-select-tag type="list" v-model="model.settingConfig"  dictCode="oa_work_time,time_str,time_str" placeholder="请选择考勤班次" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="12" v-show="model.type == '2'">
              <a-form-model-item label="未排班打卡规则" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unscheduledSignRule">
                <j-multi-select-tag type="checkbox" v-model="model.unscheduledSignRule"  dictCode="unscheduled_sign_rule_dict" placeholder="请选择未排班打卡规则" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" v-show="model.type == '2'">
              <a-form-model-item label="设置周期天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cycleDay">
                <a-input-number v-model="model.cycleDay" placeholder="请输入设置周期天数" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" v-show="model.type == '2'">
              <j-editable-table
                :ref="refKeys[1]"
                :loading="attendanceClassTable.loading"
                :columns="attendanceClassTable.columns"
                :dataSource="attendanceClassTable.dataSource"
                :maxHeight="300"
                :rowNumber="true"
                :rowSelection="true"
                :actionButton="true"/>
            </a-col>
            <a-col :xs="24" :sm="24" v-show="model.type == '3'">
              <a-form-model-item label="工作日" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workDay">
                <j-multi-select-tag type="checkbox" v-model="model.workDay"  dictCode="work_day_dict" placeholder="请选择工作日" />
              </a-form-model-item>
            </a-col>
            <a-col :xs="24" :sm="24" v-show="model.type == '3'">
              <a-form-model-item label="工作时长（小时）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workHour">
                <a-input-number v-model="model.workHour" placeholder="请输入工作时长" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <!--                 <a-col :xs="24" :sm="12">-->
            <!--                    <a-form-model-item label="排班设置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="timeConfigString">-->
            <!--                      <a-input v-model="model.timeConfigString" placeholder="请输入排班设置" ></a-input>-->
            <!--                    </a-form-model-item>-->
            <!--                  </a-col>-->

            <!--             <a-col :xs="24" :sm="12">-->
            <!--                    <a-form-model-item label="参与人数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userNum">-->
            <!--                      <a-input-number v-model="model.userNum" placeholder="请输入参与人数" style="width: 100%" />-->
            <!--                    </a-form-model-item>-->
            <!--                  </a-col>-->


          </a-row>
        </a-form-model>

      </a-tab-pane>
      <!--子表单区域 -->
      <!--     <a-tab-pane tab="设定班次" :key="refKeys[1]" :forceRender="true">-->

      <!--     </a-tab-pane>-->

      <!--     <a-tab-pane tab="工作日设置" :key="refKeys[2]" :forceRender="true">-->

      <!--     </a-tab-pane>-->

    </a-tabs>

  </a-spin>
  </j-modal>
</template>
<script>

import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
import { validateDuplicateValue } from '@/utils/util'
import { VALIDATE_NO_PASSED, validateFormModelAndTables } from '@/utils/JEditableTableUtil'

export default {
  name: 'AttendanceGroupForml',
  mixins: [JEditableTableModelMixin],
  components: {
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      model:{
      },
      validatorRules: {
      },
      refKeys: ['attendanceGroup','attendanceClass', 'attendanceWorkday', ],
      tableKeys:['attendanceClass', 'attendanceWorkday', ],
      activeKey: 'attendanceGroup',
      // 设定班次
      attendanceClassTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '第几天',
            key: 'daySeq',
            type: FormTypes.inputNumber,
            width:"200px",
            placeholder: '请输入${title}',
            defaultValue:'',
          },
          {
            title: '工作时间',
            key: 'workTime',
            type: FormTypes.select,
            dictCode:"oa_work_time,time_str,time_str",
            width:"200px",
            placeholder: '请输入${title}',
            defaultValue:'',
          },
        ]
      },
      // 工作日设置
      attendanceWorkdayTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '选择框',
            key: 'rowCheck',
            type: FormTypes.checkbox,
            dictCode:"stable_rules_checkbox_dict",
            width:"200px",
            placeholder: '请输入${title}',
            defaultValue:'',
          },
          {
            title: '工作日',
            key: 'workDay',
            type: FormTypes.select,
            dictCode:"work_day_dict",
            width:"200px",
            placeholder: '请输入${title}',
            defaultValue:'',
          },
          {
            title: '班次时间段',
            key: 'workTime',
            type: FormTypes.select,
            dictCode:"oa_work_time,time_str,time_str",
            width:"200px",
            placeholder: '请输入${title}',
            defaultValue:'',
          },
        ]
      },
      url: {
        add: "/satff/attendanceGroup/add",
        edit: "/satff/attendanceGroup/edit",
        attendanceGroup: {
          list: '/satff/attendanceGroup/queryById'
        },
        attendanceClass: {
          list: '/satff/attendanceGroup/queryAttendanceClassByMainId'
        },
        attendanceWorkday: {
          list: '/satff/attendanceGroup/queryAttendanceWorkdayByMainId'
        },
      }
    }
  },
  methods: {
    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      this.$nextTick(() => {
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.attendanceClass.list, params, this.attendanceClassTable)
        this.requestSubTableData(this.url.attendanceWorkday.list, params, this.attendanceWorkdayTable)
      }
    },
    //校验所有一对一子表表单
    validateSubForm(allValues){
      return new Promise((resolve,reject)=>{
        Promise.all([
        ]).then(() => {
          resolve(allValues)
        }).catch(e => {
          reject(e)
        })
      })
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        attendanceClassList: allValues.tablesValue[0].values,
        attendanceWorkdayList: allValues.tablesValue[1].values,
      }
    },
    /** 确定按钮点击事件 */
    handleOk() {
      /** 触发表单验证 */
      this.getAllTable().then(tables => {
        return validateFormModelAndTables(this.$refs.form,this.model, tables)
      }).then(allValues => {
        /** 一次性验证一对一的所有子表 */
        return this.validateSubForm(allValues)
      }).then(allValues => {
        if (typeof this.classifyIntoFormData !== 'function') {
          throw this.throwNotFunction('classifyIntoFormData')
        }
        console.log("this.classifyIntoFormData",typeof this.classifyIntoFormData)
        let formData = this.classifyIntoFormData(allValues)

        // 发起请求
        return this.request(formData)
      }).catch(e => {
        if (e.error === VALIDATE_NO_PASSED) {
          // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
          this.activeKey = e.index == null ? this.refKeys[0] : this.refKeys[e.index+1]
        } else {
          console.error(e)
        }
      })
    },
    validateError(msg){
      this.$message.error(msg)
    },
    close() {
      this.visible = false
      this.$emit('close')
      this.$refs.form.clearValidate();
    },

  }
}
</script>

<style scoped>
</style>